<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/chioce.css">

    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/js/setcard.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>
    <script src="__STATIC_URL__/static/js/liandong.js"></script>
    <script src="__STATIC_URL__/static/js/area.js"></script>
    <script src="__STATIC_URL__/static/layer/layer.js"></script>

    <style>
        .card-left .activityTitle {
            position: absolute;
            top: 29px;
            color: #fff;
            font-size: 14px;
            width: 162px;
            white-space: nowrap;
            left: 130px;
            display: inline-block;
            overflow: hidden;
        }
        .card-left .commodityImgBox {
            width: 318px;
            height: 203px;
        }
        .card-left .commodityImg,.img {
            width: 318px;
            height: 203px;
            display: inline-block;
            background-size: 100%;
        }
        .card-left .commodityIntroBox {
            line-height: 20px;
            min-height: 20px;
            text-align: center;
            padding-left: 20px;
            padding-right: 20px;
        }
        .c-aligh-left {
            text-align: left;
        }

        .c-inlineblock {
            display: inline-block;
        }

        .color1 {
            color: #999;
        }
        .card-left .commodityUnivalenceBox {
            overflow: hidden;
            text-align: center;
            height: 20px;
            line-height: 20px;
        }

        .color6 {
            color: #000;
        }

        .mtop5 {
            margin-top: 5px;
        }
        .fsize10 {
            font-size: 10px;
        }
        .card-left .commodityUnivalenceBox .commodityUnivalence {
            font-size: 18px;
            font-weight: bold;
            white-space: nowrap;
        }
        .pad20 {
            padding: 20px;
        }
        .c-line {
            height: 0px;
            border-top: 1px solid #E7E7EB;
        }
        .card-left .commodityDescBox {
            background-color: #F5F5F5;
            min-height: 112px;
            border-radius: 6px;
            margin: 0 20px;
            padding: 5px;
            overflow: hidden;
        }

        .c-aligh-left {
            text-align: left;
        }
        .card-left .paycommodityUnivalenceBox {
            border-radius: 6px;
            background-color: #37B835;
            height: 42px;
            line-height: 42px;
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 20px;
        }

        .mtop45 {
            margin-top: 45px;
        }
        .color7 {
            color: #fff;
        }

        .fsize14 {
            font-size: 14px;
        }
        .card-left {

            background-color: #ffffff;

        }
        #commodityIntro,.commodityIntro{
            padding-left: 10px;
            width: 328px;
            height: 88px;
            border: 1px solid #DCDDDD;
            vertical-align: text-top;
            resize: none;
        }
        .gift-record select, .gift-record input {
            display: inline-block;
            width: 40%;
            float: left;
        }
        .gift-record input {
            margin-left: 5px;
        }
        .addcord {
            padding: 0;
            margin-top: 5px;
        }
    </style>

</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section id="content">
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <!--路径导航-->
        <ol class="breadcrumb">
            <li>当前位置是&nbsp;:</li>
            <li>
                <a href="javascript:;">活动营销</a>
            </li>
            <li class="active">支付广告</li>
        </ol>
        <!--创建会员卡主要内容-->


            <div style="width: 100%;">
                <!-- TAB导航 -->

                <!-- Tab 内容 -->
                <div class="panel panel-default" style="margin-top: 15px;">
                    <form class="form-horizontal" action="" method="post" id="creatcards">
                        <div class="tab-content">
                            <!--基本信息-->
                            <div role="tabpanel" class="tab-pane active" id="home">

                                <div class="panel-body">

                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">广告标题：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                        <div class="col-sm-10">

                                            <input type="text" name="title" id="title" class="form-control" oninput="binding('title')" maxlength="12"  placeholder=""  />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">广告链接：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                        <div class="col-sm-10">

                                            <input type="text" name="ad_url" id="ad_url" class="form-control" oninput="binding('ad_url')"   placeholder=""  />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">广告生效时间：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                        <div class="col-sm-10">
                                            <input type="text" name="times" class="form-control" value="" placeholder="请选择开始时间" readonly="readonly" id="starttime">
                                        </div>


                                    </div>
                                    <div class="form-group" id="levelst">
                                        <label class="col-sm-2 col-sm-2 control-label">行业：</label>
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                <select class="form-control" id="primary" name="leibie" onchange="second_lb()">
                                                    <option value="">请选择行业</option>
                                                </select>
                                                <div class="input-group-addon">-</div>
                                                <select class="form-control" name="leibie2" id="secondary" onchange="sele()">
                                                    <option value="">请选择行业</option>
                                                </select>
                                                <div id="error11" class="error"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">门店：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                        <div class="col-sm-9 col-xs-12" id="mach">


                                            <div class="text-danger"></div>
                                        </div>
                                    </div>

                                    <!--<div class="form-group" id="area">-->
                                        <!--<label class="col-sm-2 col-sm-2 control-label">地区：</label>-->
                                        <!--<div class="col-sm-9">-->
                                            <!--<div class="input-group">-->
                                                <!--<select class="form-control" id="s_province" name="">-->

                                                <!--</select>-->
                                                <!--<div class="input-group-addon">-</div>-->
                                                <!--<select class="form-control" name="" id="s_city">-->

                                                <!--</select>-->
                                                <!--<div class="input-group-addon">-</div>-->
                                                <!--<select class="form-control" name="" id="s_county">-->

                                                <!--</select>-->
                                                <!--<div id="error13" class="error"></div>-->
                                            <!--</div>-->
                                        <!--</div>-->
                                    <!--</div>-->
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">图片：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                        <div class="col-sm-10">
                                            <img src="__STATIC_URL__/static/images/commodityImg1.png" alt="商品图片" class="img">
                                            <div class="ng-scope" style="position: relative;">
                                                <span class="btn btn-default">上传图片</span>
                                                <input type="file" id="img" value=""  onchange="upload('img','file')"/>
                                                <input type="hidden" name="img_url" id="logopic-upload" value="" >

                                            </div>
                                            <div class="r-desc ng-binding ng-scope"> 图片建议尺寸：600像素*500像素，格式为.jpg，大小不超过2M.</div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 col-md-2 control-label">活动状态：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                        <div class="col-sm-9 col-xs-12 coupon-color">
                                            <div class="controls">
                                                <div class="switch" id="give" data-animated="true">

                                                    <input type="checkbox" name="statu" id="status" value="1" checked>

                                                </div>
                                            </div>
                                            <div class="r-desc ng-binding ng-scope"> </div>
                                        </div>
                                    </div>

                                    <div class="form-group" >
                                        <label class="col-sm-2 col-sm-2 control-label">广告类型：</label>
                                        <div class="col-sm-6">
                                            <div class="input-group">
                                                <select class="form-control" id="type" name="type">
                                                    <option value="0" >点击后跳转</option>
                                                    <option value="1" >支付后跳转</option>

                                                </select>

                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>


                        </div>
                        <div class="panel-footer">
                            <button type="button"  id="creatcards-btn" onclick="addform()" class="btn btn-success">保存</button>
                        </div>
                    </form>

                </div>

            </div>
        {include file='public/footer'/}
    </div>


    <!--获取门店列表-->
    <!-- Modal -->

    </div>
</section>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script>
    $(function(){
        first();
      mach();
    });
    function check(obj){

        if ($(obj).is(":checked")) {

            $(obj).parent().siblings().find("input:checkbox").prop("checked", true);

        } else {

            $(obj).parent().siblings().find("input:checkbox").prop("checked", false);
        }
    }
    function mach(){
        var leibie=$("#primary").val();
        var leibie2=$("#secondary").val();
            if(leibie=="请选择"){
                leibie=0;
            }
        if(leibie2=="请选择"){
            leibie2=0;
        }
        $.ajax({
            url:"{:url('marke/getputmach')}",
            type:"POST",
            data:{
                leibie:leibie,
                leibie2:leibie2
            },
            success: function (data) {
                console.log(data);
             if(data.code==0){
                 $('#mach').html("");
                 //console.log();
                 var text=data.data;
                 span="";
                 if(text==""){
                     check=""
                 }else{
                     var check= ' <span class="checkbox ng-scope checkbox-inline">\n' +
                         '                                        <input type="checkbox" name="mid[]" value="0" onclick="check(this);" class="checkmid">\n'+
                         '                                                <label class="ng-binding">全选</label>\n' +
                         '                                            </span>'
                 }

                 for (var i = 0; i < text.length; i++) {

                     span += ' <span class="checkbox ng-scope checkbox-inline">\n' +
                         '                                                <input name="mid[]" value="' + text[i].id + '" type="checkbox" class="checkmid">\n' +
                         '                                                <label class="ng-binding">'+text[i].merchant+'</label>\n' +
                         '                                            </span>'


                 }
                 $('#mach').append(check+span);
             }else{
                 $('#mach').html("");
             }
            }
        })
    }
    function sele(){
        mach();
    }
</script>
<script type="text/javascript">
//地区
//     var Gid  = document.getElementById ;
//
//     var showArea = function(){
//
//         Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" +
//
//             Gid('s_city').value + " - 县/区" +
//
//             Gid('s_county').value + "</h3>"
//
//     }
//
//     Gid('s_county').setAttribute('onchange','showArea()');

</script>
<script>

    var date = new Date();
    var year = parseInt(date.getFullYear());
    var month = parseInt(date.getMonth())+1;
    var day = parseInt(date.getDate());
    var H = parseInt(date.getHours())+2;
    var M =parseInt( date.getMinutes());
    var S = parseInt(date.getSeconds());
    if(month<10){
        month = "0"+month;
    }
    if(day<10){
        day = "0"+day;
    }
    var min = year+"-"+month+"-"+day +" "+ H +':'+ M +':'+S;
    laydate.render({
        elem: '#starttime',
        type: 'datetime',
        range:'-',
        min:min,
        change: function(value, date,endDate){ //监听日期被切换
            console.log(value,endDate);

        }
    });

</script>
<script>
    $("#isfollow").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#is_follow").val(1);
        }else{
            $("#is_follow").val(0);
        }
    });

    $("#give").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#status").val(1);
        }else{
            $("#status").val(0);
        }
    });
    function binding(id){
        var val = $("#"+id).val();
        if(val==''){
            val="自定义名称";
        }
        $("."+id).text(val);
    }
</script>
<script>
    function upload(file, typed) {
        var formData = new FormData();
        formData.append('file', $('#' + file)[0].files[0]);
        formData.append('other', file);
        $.ajax({
            url: "{:url('uploads/upload')}",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (res) {
            console.log(res);
            if(res.code=="0"){
                //            左侧预览图背景

//            右侧预览图片
                $(".img").attr("src", res.pic);
//            相应隐藏input传值
                $("#logopic-upload").val(res.pic);
            }else{
                layer.alert(res.message);
            }

            // $("." + file).attr("src", res.savapath).css("display", "block");
            // $(".file-" + file).val(res.other);
            // $("." + typed + "-" + file).val(res.other);
        }).fail(function (res) {
            alert("上传失败")
        });
    };
</script>
<script>
    function first(){
        //指定first的子元素option的长度
        primary.length=arr_first.length;
        for(var i=0;i<arr_first.length;i++){
            primary.options[i].text=arr_first[i].name;
            primary.options[i].value=arr_first[i].name;
        }
        index = primary.selectedIndex;
        secondary.length=arr_second[index].length;
        for(var i=0;i<arr_second[index].length;i++){
            secondary.options[i].text=arr_second[index][i].name;
            secondary.options[i].value=arr_second[index][i].name;
        }
    };
    function second_lb(){
        //修改一级类别列表中默认选择项		var index=0;
        //一级类别选中下标

        secondary.length=0;
        index = primary.selectedIndex;
        secondary.length=arr_second[index].length;
        for(var i=0;i<arr_second[index].length;i++){
            secondary.options[i].text=arr_second[index][i].name;
            secondary.options[i].value=arr_second[index][i].name;
        }
        mach();
    }
</script>
<script>
    $(function(){

        // _init_area();
    })
</script>
<script>
    function addform(){
        var logopic=$("#logopic-upload").val();
        var title=$("#title").val();
        var ad_url=$("#ad_url").val();
        var starttime=$("#starttime").val();
        var primary=$("#primary").val();
        var type= $("#type").val();
        var mid=$("input[name='mid[]']");
        var val=[];
        for(i=0;i<mid.length;i++){
            //console.log(mid.length);
            if(mid[i].checked){
                val.push(mid[i].value);
               // console.log(val);

            }
        }

        // 遍历并保存各个下拉列表的值于valMap
        if(title==""){
            layer.alert('请填写广告标题！');
            return false;
        }
        if(ad_url==""){
            layer.alert('请填写广告链接！');
            return false;
        }
        if(starttime==""){
            layer.alert('请填写广告时间！');
            return false;
        }
        if(primary=="请选择"&&val==""){
            layer.alert('请填写广告行业或门店！');
            return false;
        }
        if(logopic==""){
            layer.alert('请上传图片！');
            return false;
        }
        if(type==""){
            layer.alert('请填写广告类型！');
            return false;
        }

        // 校验通过，全部都不相同
        //  $("#creatcards").submit();
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('marke/advertadd')}" ,
            data: $('#creatcards').serialize(),
            success: function (data) {
                console.log(data);//打印服务端返回的数据(调试用)
                if (data.code == 0) {
                    layer.alert('保存成功！')
                    window.location.replace("{:url('marke/advertlist')}");
                };
            },
            error : function() {
                alert("异常！");
            }
        });

    }

</script>
<script>

    function delsel(obj){
        $(obj).parent().remove();
    }

</script>
<script>

    //数据绑定
    function binding(id,name){
        var val = $("#"+id).val();
        if(val==""){
            val=name
        }
        $("."+id).text(val)
    }

</script>
</body>

</html>
